<template>
	<view class="main">
		<view class="header">
			<image @tap="routerBack()" class="back" src="@/static/img/backIcon.png" mode=""></image>
			<u-swiper :list="list1" :autoplay="false" imgMode="scaleToFill"></u-swiper>
			<view class="price">
				<p>￥{{ goodsInfo.member_price }}</p>
			</view>
		</view>
		<view class="content">
			<view class="tit">{{goodsInfo.name}}</view>
			<view class="msg">{{goodsInfo.intro}}</view>
		</view>
		<view class="num">
			<p class="msg">销量</p>
			<p>{{goodsInfo.sell_num}}</p>
		</view>
		<view class="detail">
			<!-- <view class="comment">
				<view class="tit">
					<view class="msg">用户评价（0）</view>
					<view class="more">
						查看全部
						<image src="@/static/img/hright.png" mode=""></image>
					</view>
				</view>
				<view class="none" v-if="false">暂无评价</view>
				<ul class="list">
					<li>
						<view class="top">
							<view class="info">
								<image class="img" src="@/static/img/ceshi.jpg" mode=""></image>
								<view class="msg">
									<view class="name">用户昵称</view>
									<view class="time">2024-07-15</view>
								</view>
							</view>
							<view class="pingfen">
								<u-rate active-color="#FFD034" inactive-color="#ECECEC" size="30" :count="5" v-model="value" readonly></u-rate>
							</view>
						</view>
						<view class="listcon">商品质量很好，非常有用</view>
					</li>
				</ul>
			</view> -->
			<view class="detailBox">
				<h2>商品详情</h2>
				<view class="con" v-html="goodsInfo.goods_detail"></view>
			</view>
		</view>
		<view class="bottom" v-if="!type">
			<view class="one" @tap="goIndex">
				<image src="@/static/img/index.png" mode=""></image>
				<view class="msg">首页</view>
			</view>
			<view class="one">
				<!-- <image src="@/static/img/share.png" mode=""></image>
				<view class="msg">分享</view> -->
			</view>
			<view class="btn cart" @tap="show = true">加入购物车</view>
			<view class="btn now" @tap="show = true">立即购买</view>
		</view>
		<u-popup :show="show" :round="10" @close="show = false" :closeable="true">
			<view class="popup">
				<view class="popupHeader">
					<view class="imgBox">
						<image :src="goodsInfo.image" mode=""></image>
					</view>
					<view class="txt">
						<view class="name">
							{{goodsInfo.name}}
						</view>
						<view class="price">
							￥{{skuData.price}}
						</view>
					</view>
				</view>
				<view class="popupCon">
					<view class="skuBox" v-for="(item,index) in attrsList" :key="index">
						<view class="name">
							{{item.name}}
						</view>
						<view class="itemBox">
							<view @tap="seleSku(item,sitem,index)" :class="{item:true , active:item.sele == index}" v-for="(sitem,index) in item.sons"
								:key="index">
								{{sitem.name}}
							</view>
						</view>
					</view>
					<view class="popupNum">
						<view class="msg">
							购买数量
						</view>
						<u-number-box class="numBox" v-model="value">
							<view slot="minus" class="minus">
								<image src="@/static/img/minus.png" mode=""></image>
							</view>
							<text slot="input" style="width: 50px; text-align: center" class="input">{{ value }}</text>
							<view slot="plus" class="plus">
								<image src="@/static/img/plus.png" mode=""></image>
							</view>
						</u-number-box>
					</view>
				</view>
				<view class="popupbottom">
					<view v-if="isBay" class="btn cart" @tap="addCart">加入购物车</view>
					<view v-if="isBay" class="btn now" @tap="bayNow">立即购买</view>
					<view v-if="!isBay" class="disBtn">
						库存不足
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import{
		getDetail,
		sku,
		create,
		preOrder
	} from '@/api/user.js'
export default {
	data() {
		return {
			list1: [],
			value: 1,
			show:false,
			numvalue:1,
			type:null,
			id:'',
			goodsInfo:{},
			attrsList:[],
			attrs:[],
			attrssons:[],
			skuData:{},
			isBay:true
		};
	},
	onLoad(e) {
		if(e.type){
			this.type = e.type
		}
		this.id = e.id
		this.getInfo()
	},
	onShow() {
		this.show = false
	},
	methods: {
		seleSku( item,sitem, index) {
			let i = this.attrsList.findIndex(obj => obj.id === item.id);
			item.sele = index
			this.attrsList.splice(i, 1, item)
			let a = this.attrs.indexOf(item.id)
			this.attrssons[a] = sitem.id
			let skus = ''
			skus = this.attrs.map((item,index) => {
				return `${item}:${this.attrssons[index]}`;
			}).join(',')
			sku({
				product_id: this.goodsInfo.id,
				attrs: skus
			}).then(res => {
				if (res.code == 1) {
					this.isBay = true
					this.skuData = res.data
				} else {
					this.isBay = false
					this.skuData = {
						id: '',
						price: 0,
						stock: 0
					}
				}
			})
		},
		async getInfo(){
			let res = await getDetail({
				id:this.id
			})
			this.goodsInfo = res.data
			this.list1 = this.goodsInfo.pics
			this.attrsList = this.goodsInfo.attrs
			this.attrsList.forEach(item => {
				item.sele = 0
			})
			this.attrsList.forEach(item => {
				this.attrs.push(item.id)
				this.attrssons.push(item.sons[0].id)
			})
			let skus = ''
			skus = this.attrs.map((item,index) => {
				return `${item}:${this.attrssons[index]}`;
			}).join(',')
			sku({
				product_id:this.id,
				attrs:skus
			}).then(res => {
				if (res.code == 1) {
					this.isBay = true
					this.skuData = res.data
				} else {
					this.isBay = false
					this.skuData = {
						id: '',
						price: 0,
						stock: 0
					}
				}
			})
		},
		async addCart(){
			let res = await create({
				sku_id:this.skuData.id,
				number:this.value
			})
			if(res.code == 1){
				this.show = false
				uni.showToast({
					title:'加入成功',
					icon:'none'
				})
			}else{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		},
		async bayNow(){
			let res = await preOrder({
				data:`sku_id:${this.skuData.id},number:${this.value}`
			})
			this.routerTo(`/pages/pageB/order/payOrder?tag=${res.data}`)
		},
		routerBack() {
			uni.navigateBack();
		},
		routerTo(url){
			uni.navigateTo({
				url:url
			})
		},
		goIndex(){
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	min-height: 100vh;
	background-color: #f6f7f9;
	padding-bottom: 70px;
	.header {
		position: relative;
		.back {
			width: 30px;
			height: 30px;
			position: absolute;
			top: 50px;
			left: 15px;
			z-index: 100;
		}
		/deep/.u-swiper {
			width: 100%;
			height: 255px !important;
		}
		/deep/.u-swiper__wrapper {
			width: 100% !important;
			height: 255px !important;
		}
		/deep/.u-swiper__wrapper__item__wrapper__image {
			width: 100% !important;
			height: 255px !important;
			border-radius: 0;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.price {
			padding: 15px;
			background-color: #f36d6c;
			p {
				color: #fff;
				font-weight: 700;
			}
		}
	}
	.content {
		background-color: #fff;
		padding: 10px 15px;
		margin-bottom: 1px;
		.tit {
			width: 100%;
			color: #3d3d3d;
			margin-bottom: 15px;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.msg {
			font-size: 14px;
			color: #a3535c;
		}
	}
	.num {
		background-color: #fff;
		padding: 15px 17px;
		font-size: 13px;
		display: flex;
		margin-bottom: 10px;
		.msg {
			margin-right: 10px;
			color: #898989;
		}
	}
	.detail {
		padding: 0 15px;
		background-color: #fff;
		.comment {
			padding-top: 15px;
			margin-bottom: 15px;
			.tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
				.msg {
					font-size: 13px;
					color: #3d3d3d;
				}
				.more {
					display: flex;
					align-items: center;
					color: #999999;
					font-size: 13px;
					image {
						width: 18px;
						height: 18px;
					}
				}
			}
			.none {
				padding: 25px 0;
				text-align: center;
				border: 1px solid #f5f5f5;
				color: #676767;
			}
			.list {
				width: 100%;
				li {
					width: 100%;
					border: 1px solid #f5f5f5;
					padding: 10px 15px;
					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 15px;
						.info {
							display: flex;
							.img {
								width: 34px;
								height: 34px;
								border-radius: 1000px;
								margin-right: 7px;
							}
							.msg {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								.name {
									color: #232323;
									font-size: 12px;
								}
								.time {
									font-size: 12px;
									color: #666666;
								}
							}
						}
					}
					.listcon {
						font-size: 14px;
						color: #3d3d3d;
					}
				}
			}
		}
		.detailBox {
			padding-bottom: 20px;
			h2 {
				font-size: 15px;
				color: #3d3d3d;
				margin-bottom: 10px;
			}
			.con{
				width: 100%;
				/deep/img{
					width: 100% !important;
					float: none !important;
				}
				/deep/p{
					margin-bottom: 5px;
				}
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		background-color: #fff;
		.one {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 10px;
			color: #232323;
			image {
				width: 20px;
				height: 20px;
				margin-bottom: 3px;
			}
		}
		.btn {
			font-size: 12px;
			color: #fff;
			padding: 10px 20px;
			border-radius: 100px;
		}
		.cart {
			background-color: #313132;
		}
		.now {
			background-color: #0a84ff;
		}
	}
	.popup{
		padding: 35px 15px 0;
		.popupHeader{
			display: flex;
			margin-bottom: 22px;
			.imgBox{
				margin-right: 15px;
				image{
					width: 80px;
					height: 60px;
					border-radius: 5px;
				}
			}
			.txt{
				font-size: 14px;
				height: 60px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.price{
					color: #E1222A;
					font-size: 16px;
					font-weight: 700;
				}
			}
		}
		.popupCon{
			padding-bottom: 30px;
			.skuBox {
				margin-bottom: 15px;
			
				.name {
					color: #232323;
					font-size: 14px;
					margin-bottom: 15px;
				}
			
				.itemBox {
					display: flex;
					flex-wrap: wrap;
			
					.item {
						min-width: 73px;
						text-align: center;
						padding: 8px 0;
						border-radius: 1000px;
						background-color: #F8F9FC;
						font-size: 14px;
						margin-right: 17px;
						margin-bottom: 15px;
						color: #232323;
					}
			
					.active {
						background-color: #0A84FF;
						color: #fff;
					}
				}
			}
			.popupNum{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.numBox {
					align-items: center;
					.minus {
						image {
							width: 22px;
							height: 22px;
							vertical-align: top;
						}
					}
					.input {
						padding: 0 5px;
					}
					.plus {
						image {
							width: 22px;
							height: 22px;
							vertical-align: top;
						}
					}
				}
			}
		}
		.popupbottom {
			background-color: #fff;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			.btn {
				width: 50%;
				font-size: 12px;
				color: #fff;
				padding: 10px 0;
				text-align: center;
			}
			.cart {
				background-color: #313132;
				border-radius: 100px 0 0 100px;
			}
			.now {
				background-color: #0a84ff;
				border-radius: 0 100px 100px 0;
			}
			.disBtn{
				width: 100%;
				font-size: 12px;
				color: #fff;
				padding: 10px 0;
				text-align: center;
				border-radius: 100px;
				background-color: #666666;
			}
		}
	}
}
</style>
